import React, { Component, Fragment } from "react";
// antd
import { Modal, Table, Button, Col, Pagination, Form, Input, message, Tag, Select } from "antd";
import Action from "@c/buttonAction/Index";
// http
import http from '../../../utils/request';

const { Option } = Select;


class UserMarkManage extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "用户", dataIndex: "user", key: "user", width: "100px"},
                {title: "部门", dataIndex: "department", key: "department"},
                {title: "区域", dataIndex: "region", key: "region",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="magenta">{rowData.region}</Tag>
                            </div>
                        )
                    }
                },
                {title: "类别", dataIndex: "use", key: "use",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="magenta">{rowData.use}</Tag>
                            </div>
                        )
                    }
                },                
                {title: "ip", dataIndex: "ip", key: "ip"},
                {title: "mac", dataIndex: "mac", key: "mac"},
                {title: "mac_default", dataIndex: "mac_default", key: "mac_default"},
                {title: "mac_360", dataIndex: "mac_360", key: "mac_360"},
                {title: "mac_ac", dataIndex: "mac_ac", key: "mac_ac"},
                {title: "mac_huawei", dataIndex: "mac_huawei", key: "mac_huawei"},
                {title: "备注", dataIndex: "remark1", key: "remark1"},
                {title: "备注(补充)", dataIndex: "remark2", key: "remark2"},
                {title: "更新", dataIndex: "updated", key: "updated"},
                {title: "操作", dataIndex: "operation", key: "operation",
                    render: (text, rowData) => {
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Action.Button onClick={() => this.onEditUserMarkBtn({rowData: rowData, status: true})}>编辑</Action.Button>
                                    <Action.Button onClick={() => this.onDeleteUserMarkBtn(rowData)}>删除</Action.Button>
                                </Action>
                            </div>
                        )
                    }           
                }
            ],
            loading: false,
            search_common: null,
            search_region_id: null,
            visible_add: false,     // 添加
            visible_edit: false,    // 编辑
            visible_delete: false,  // 删除

            del_id: null,
            del_user: null,

            inner_region_list_option: []

        }
        this.formRefAdd = React.createRef();
        this.formRefEdit = React.createRef();
        this.formRefMsg = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataInnerRegion()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'search_common__contains': this.state.search_common,
            'region_id': this.state.search_region_id
        }

        // 获取分组列表
        http.get('/inner/user/mark', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    loadDataInnerRegion = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/inner/region', {params: requestData}).then(response=> {
            const resp_data = response.data.data.items
            
            const inner_region_list_option = []
            for (let i = 0; i < resp_data.length; i++) {
                inner_region_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].name}</Option>)
            }
            this.setState({
                inner_region_list_option: inner_region_list_option,
            })
        })
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 业务线搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_common: data.search_common ? data.search_common : null,
            search_region_id: data.region_id ? data.region_id : null
        })
        this.loadData()
    }

    /** 添加商务按钮 */
    onAddBusinessPersonBtn = () => {
        this.setState({
            visible_add: true
        })
    }

    /** 添加业务线取消 */
    onFinishAddCancel = () => {
        this.setState({
            visible_add: false
        })
        this.formRefAdd.current.resetFields()
    }

    /** 添加业务线提交 */
    onFinishAdd = (data) => {
        const requestData = {
            user: data.user,
            mac: data.mac,
            remark1: data.remark1,
            remark2: data.remark2,
            department: data.department,
            region_id: data.region_id
        }
        http.post('/inner/user/mark', requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    /** 编辑业务线按钮 */
    onEditUserMarkBtn = (data) => {
        http.get('/inner/user/mark').then(response=>{
            var region_id = String(data.rowData.region_id)
            this.formRefEdit.current.setFieldsValue({
                id: data.rowData.id,
                ip: data.rowData.ip,
                user: data.rowData.user,
                mac: data.rowData.mac,
                department: data.rowData.department,
                remark1: data.rowData.remark1,
                remark2: data.rowData.remark2,
                region_id: region_id
            })
        }).catch()
        this.setState({
            visible_edit: true,
        })
    }

    /** 编辑业务线取消 */
    onFinishEditCancel = () => {
        this.setState({
            visible_edit: false,
        })
        this.formRefEdit.current.resetFields();
    }

    /** 编辑业务线提交 */
    onFinishEdit = (data) => {
        const requestData = {
            user: data.user,
            ip: data.ip,
            mac: data.mac,
            remark1: data.remark1,
            remark2: data.remark2,
            region_id: data.region_id,
            department: data.department
        }
        http.put('/inner/user/mark/' + data.id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_edit: false
            })
            this.formRefEdit.current.resetFields();
            this.loadData()
        }).catch()
    }

    /** 删除业务线提交 */
    handleUserDelete = () => {
        http.delete('/inner/user/mark/' + this.state.del_id).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_delete: false,
            })
            this.loadData()
        }).catch()    
    }

    /** 删除业务线提交 */
    onDeleteUserMarkBtn = (data) => {
        this.setState({
            del_id: data.id,
            del_user: data.user,
            visible_delete: true,
            page: 1,
        })
    }

    render(){
        const { loading, dataSource, columns, page, total, visible_add, visible_edit, visible_delete, del_user, inner_region_list_option } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                
                <Form layout="inline" onFinish={this.onFinishSearch}>

                
                    <Form.Item label="搜索" name="search_common">
                        <Input placeholder="搜索内容"  />
                    </Form.Item>

                    <Form.Item label="所属区域" name="region_id">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {inner_region_list_option}
                        </Select>
                    </Form.Item>

                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                
                <div style={myStyle1}><Button type="primary" onClick={this.onAddBusinessPersonBtn}>添加内网资源</Button></div>

                <Table
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 2000 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="添加"
                    visible={visible_add}
                    onCancel={this.onFinishAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={800}
                >
                    <Form
                        onFinish={this.onFinishAdd}
                        ref={this.formRefAdd}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="用户" name="user" rules={[{ required: true}]}>
                            <Input placeholder="用户名"></Input>
                        </Form.Item>

                        <Form.Item label="mac" name="mac" rules={[{ required: true}]}>
                            <Input placeholder="格式: aa-bb-cc-dd-ee-ff"></Input>
                        </Form.Item>

                        <Form.Item label="部门" name="department" rules={[{ required: true}]}>
                            <Input placeholder="格式: 快麦大商家事业部-快麦客服业务部"></Input>
                        </Form.Item>

                        <Form.Item label="备注" name="remark1">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="备注" name="remark2">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="区域" name="region_id" rules={[{ required: true}]}>
                            <Select
                                // size="small"
                                allowClear
                                showSearch
                                placeholder="请选择区域"
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {inner_region_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="编辑"
                    visible={visible_edit}
                    onCancel={this.onFinishEditCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={800}
                >
                    <Form
                        onFinish={this.onFinishEdit}
                        ref={this.formRefEdit}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="ID" name="id" hidden>
                            <Input disabled></Input>
                        </Form.Item>

                        <Form.Item label="用户" name="user" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="IP" name="ip" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="mac" name="mac" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="部门" name="department" rules={[{ required: true}]}>
                            <Input placeholder="格式: 快麦大商家事业部-快麦客服业务部"></Input>
                        </Form.Item>

                        <Form.Item label="备注" name="remark1">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="备注" name="remark2">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="区域" name="region_id" rules={[{ required: true}]}>
                            <Select
                                // size="small"
                                allowClear
                                showSearch
                                // style={{ width: 200 }}
                                placeholder="请选择区域"
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                }
                            >
                                {inner_region_list_option}
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                            
                    </Form>           
                </Modal>

                <Modal
                    title="删除"
                    visible={visible_delete}
                    onOk={this.handleUserDelete}
                    onCancel={() => {this.setState({visible_delete: false, del_id: ''})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定删除内网资源<span style={{color: 'red'}}> {del_user}</span>? 删除后将无法恢复</p>
                </Modal>
            </Fragment>
        )
    }
}
export default UserMarkManage;